<template>
  <div class="app-container">
    <el-button icon="el-icon-question" type="primary" @click.prevent.stop="addTaskFlag=true">
      增加扫描任务
    </el-button>
    <el-table :data="taskList" highlight-current-row @row-click="selectRow">
      <el-table-column label="taskId" width="220" prop="taskId" />
      <el-table-column label="任务名称" width="200" prop="taskName" />
      <el-table-column label="目录" width="120" />
      <el-table-column label="文件信息" width="300" prop="" />
    </el-table>

    <el-pagination
      layout="prev, pager, next"
      :total="50"
    />

    <el-dialog :visible.sync="addTaskFlag">
      <el-form :inline="true" :model="taskParam" class="demo-form-inline">
        <el-form-item label="文件目录">
          <el-input v-model="taskParam.fileDir" placeholder="文件目录" />
        </el-form-item>
        <el-form-item label="任务名称">
          <el-input v-model="taskParam.taskName" placeholder="任务名称" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addTaskFlag = false">取 消</el-button>
        <el-button type="primary" @click="addTaskSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="videoPlayFlag">
      <span v-if="videoPlayFlag" class="preview-video-play-box">
        <video class="video-js preview-video-play" id="playVideo">
          <source :src="videoUrl" type="video/mp4"/>
        </video>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="videoPlayFlag = false">关闭</el-button>
      </span>
    </el-dialog>
    <div class="task-log">
         <span v-html="curMessage" class="log-content">
          
         </span>
    </div>
    <div class="topicPreview">
        <el-table :data="curRow.topics">
            <el-table-column width="200" lable="标题" prop="topicTitle">    
            </el-table-column>
            <el-table-column width="200" label="视频" prop="topicTitle">    
              <template slot-scope="scope" v-if="scope.row.topicRec!=null">
                  <template  v-for="(video,index) in scope.row.topicRec.videoListObj">
                        <video :key="index" :src="getFilePath(video.fileNo)" class="preview-video" @click="playVideo(getFilePath(video.fileNo))"/>
                     </template>
              </template>
            </el-table-column>
            <el-table-column>
                <template slot-scope="scope" v-if="scope.row.topicRec!=null">
                  <viewer :images="scope.row.topicRec.picListObj">
                     <template  v-for="(pic,index) in scope.row.topicRec.picListObj">
                        <img :key="index" :src="getFilePath(pic.fileNo)" class="preview-img"/>
                     </template>
                   </viewer>
                   <viewer :images="scope.row.topicRec.thumbListObj">
                     <template  v-for="(pic,index) in scope.row.topicRec.thumbListObj">
                        <img :key="index" :src="getFilePath(pic.fileNo)" class="preview-img"/>
                     </template>
                   </viewer>
                </template>
            </el-table-column>
        </el-table>
    </div>
  </div>
</template>


<script>
import { addFileIteTask, queryTask } from '@/api/file'
import { clearInterval } from 'timers';
export default {
  name: 'FileIte',
  data() {
    return {
      driver: null,
      addTaskFlag: false,
      taskList: [],
      taskParam: {
        fileDir: '',
        taskName: ''
      },
      curRow:{
        curMessage:"",
        topics:[]
      },
      curTaskId:"",
      videoPlayFlag:false,
      videoUrl:"",
      time:null
    }
  },
  mounted() {
   this.time = setInterval(() => {
      this.queryTaskFn()
    }, 2000)
  },
  computed:{
     curMessage(){
        return this.curRow.curMessage;
     }
  },
  destroyed(){
      clearInterval(this.time)
  },
  methods: {
    playVideo(url){
        this.videoPlayFlag = true;
        this.videoUrl = url;
        if(window.videoplay){
           window.videoplay.dispose();
        }
        setTimeout(()=>{
          window.videoplay = videojs('playVideo',{
            muted: false,
            controls: true,
            loop: false,
            autoplay:true
          })
        })
    },
    getFilePath(code){
        return process.env.VUE_APP_BASE_API2+"/file/load?fileNo="+code
    },
    selectRow(row, column, event){
          this.curRow = row;
    },
    addTaskSubmit() {
      this.addTaskFlag = false
      addFileIteTask({ dir: this.taskParam.fileDir, taskName: this.taskParam.taskName }, true).then((res) => {
        console.log(res)
      }).catch((error) => {

      })
    },
    
    queryTaskFn() {
      queryTask().then((res) => {
        this.taskList = res.data;
        let task = this.taskList.filter((item)=>{
              return this.curRow.taskId==item.taskId;
        });
        if(task.length>0){
            this.curRow = task[0]
        }
      }).catch((error) => {

      })
    }
  }
}
</script>

<style scoped>
  .task-log{
      width:80%;
      background: #cccccc;
      height: 300px;
      bottom:20px;
      position:absolute;
      overflow-y: scroll;
  }
  .log-content{
      font-size:10px;
      position: absolute;
      min-height: 100%;
      padding: 20px;
      color:#00BCD4;
  }
  .preview-img{
    width:50px;
    height:40px;
    margin-left:1px;
  }
  .preview-video{
    width:80px;
    height:80px;
  }
  .preview-video-play{
    width:100%;
    height:600px;
  }
  
</style>

